<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
</head>
<body>
<button id="a1" onclick="s1()" >1</button>
<button id="a2" onclick="s2()" >2</button>
<button id="a3" onclick="s3()" >3</button>
<button id="a4" onclick="s4()" >4</button>
<button id="a5" onclick="s5()" >5</button>
<button id="a6" onclick="s6()" >放大</button>
<button id="a7" onclick="s7()" >缩小</button>
<button id="a8" onclick="s8()" >上一张</button>
<button id="a9" onclick="s9()" >下一张</button>
<button id="a0" onclick="s0()" >旋转</button>
<hr/>
<img width="400"  src="1.jpg" id="pic"/>
</body>
<script>
    var i=0;
function f(){
a1.style.color="";
a2.style.color="";
a3.style.color="";
a4.style.color="";
a5.style.color="";
a0.style.color="";
pic.width="400";
pic.style.transform="";
i=0;
}
var deg = 0;
    function s1(){
        f();
        pic.src="1.jpg";
	a1.style.color="red";
	i=1;
	}
    
    function s2(){
        f();
        pic.src="2.jpg";
	a2.style.color="red";
	i=2;
	}
	
    function s3(){
        f();
        pic.src="3.jpg";
	a3.style.color="red";
	i=3;
    }
    function s4(){
        f();
        pic.src="4.jpg";
	a4.style.color="red";
	i=4;
    }
    function s5(){
        f();
        pic.src="5.jpg";
	a5.style.color="red";
	i=5;
    }
    function s6(){
        pic.width=pic.width*1.1;
    }
    function s7(){
        pic.width=pic.width*0.9;
    }
    function s9(){
        if(i==1){
         s2();
        }else if(i==2){
	s3();
	}else if(i==3){
	s4();
	}else if(i==4){
	s5();
	}else if(i==5){
	s5();
	alert("这已经是最后一张图！！！");
	}else{
	s2();
	}

    }
    function s8(){
	
        if(i==5){
         s4();
        }else if(i==4){
	s3();
	}else if(i==3){
	s2();
	}else if(i==2){
	s1();
	}else if(i==1){
	s1();
	alert("这已经是第一张图！！！");
	}else{
	s4();
	}

    }
    function s0(){
	
	deg+=90;
        pic.style.transform="rotate("+deg+"deg)";
	a0.style.color="red";
	
    }

</script>
</html>